

/**
 * 公共矩形类，可移动
 * 属性：宽度，高度，横坐标，纵坐标，横向速度，纵向速度，对应的dom对象
 * xSpeed：横向速度，单位（像素/秒）
 * ySpeed：纵向速度，单位（像素/秒）
 */
class Rectangle {
    constructor(width, height, left, top, xSpeed, ySpeed, dom) {
        this.width = width;
        this.height = height;
        this.left = left;
        this.top = top;
        this.xSpeed = xSpeed;
        this.ySpeed = ySpeed;
        this.dom = dom;
        //赋值之后，进行渲染
        this.render()
    }

    /**
     * 按照矩形的传入速度，以及时间移动矩形
，     * @param {*} duration 单位：秒
     */
    move(duration) {
        const xDis = this.xSpeed * duration
        const yDis = this.ySpeed * duration
        this.left += xDis
        this.top += yDis
        //可能会发生的一些事情
        if(this.onmove){
            //每次移动之后，渲染之前，均会判断
            this.onmove()
        }
        this.render()  //重新渲染
    }

    /**
     * 对宽度，高度，left，top重新赋值
     */
    render() {
        this.dom.style.width = this.width + 'px'
        this.dom.style.height = this.height + "px";
        this.dom.style.left = this.left + "px";
        this.dom.style.top = this.top + "px";
    }



}